<template>
  <div class="cityImg">
    <!-- <img src="~assets/images/cityList.png" alt="" /> -->
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane
        v-for="(item, index) in cityList"
        :label="item.category"
        :name="index + ''"
        :key="index"
      >
        <city-item :cityList="item.cityList" :index="index"></city-item>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import cityItem from "components/flight/ft_cityItem.vue";

export default {
  name: "ft_cityList",
  data() {
    return {
      activeName: "0",
      cityList: [
        {
          category: "国内热门",
          cityList: [
            "北京",
            "上海",
            "广州",
            "成都",
            "重庆",
            "西安",
            "昆明",
            "深圳",
            "杭州",
            "厦门",
            "长沙",
            "海口",
            "武汉",
            "乌鲁木齐",
            "郑州",
            "三亚",
            "贵阳",
            "南京",
            "青岛",
            "哈尔滨",
          ],
        },
        {
          category: "ABCDE",
          cityList: [
            {
              letter: "A",
              cityList: [
                "阿勒泰",
                "阿克苏",
                "鞍山",
                "安庆",
                "安顺",
                "安阳",
                "阿里",
                "阿尔山",
                "安康",
                "阿拉善左",
                "阿拉善右",
              ],
            },
            {
              letter: "B",
              cityList: [
                "百色",
                "包头",
                "蚌埠",
                "北海",
                "博乐",
                "邦达",
                "保山",
                "毕节",
                "巴彦",
                "淖尔",
                "北京",
              ],
            },
            {
              letter: "C",
              cityList: [
                "常德",
                "长春",
                "朝阳",
                "赤峰",
                "长治",
                "重庆",
                "长海",
                "长沙",
                "成都",
                "常州",
                "长白山",
                "池州",
                "沧源",
                "承德",
              ],
            },
            {
              letter: "D",
              cityList: [
                "大同",
                "达州",
                "丹东",
                "大连",
                "大理",
                "敦煌",
                "东营",
                "大庆",
                "大足",
                "德宏",
                "芒市",
                "稻城",
              ],
            },
            {
              letter: "E",
              cityList: ["鄂尔多斯", "恩施", "额济纳旗", "二连浩特"],
            },
          ],
        },
        {
          category: "FGHJ",
          cityList: [
            {
              letter: "F",
              cityList: ["福州", "阜阳", "佛山", "富蕴", "抚远"],
            },
            {
              letter: "G",
              cityList: [
                "广州",
                "广汉",
                "格尔木",
                "广元",
                "赣州",
                "贵阳",
                "桂林",
                "固原",
              ],
            },
            {
              letter: "H",
              cityList: [
                "海口",
                "邯郸",
                "黑河",
                "呼和浩特",
                "合肥",
                "杭州",
                "淮安",
                "海拉尔",
                "哈密",
                "衡阳",
                "哈尔滨",
                "和田",
                "惠州",
                "汉中",
                "黄山",
              ],
            },
            {
              letter: "J",
              cityList: [
                "酒泉",
                "景德镇",
                "嘉峪关",
                "井冈山",
                "吉林",
                "九江",
                "佳木斯",
                "济宁",
                "锦州",
                "鸡西",
                "九寨沟",
                "揭阳",
                "济南",
                "加格达奇",
                "金昌",
                "建三江",
              ],
            },
          ],
        },
        {
          category: "KLMNP",
          cityList: [
            {
              letter: "K",
              cityList: [
                "库车",
                "喀什",
                "喀纳斯",
                "昆明",
                "库尔勒",
                "克拉玛依",
                "康定",
                "凯里",
              ],
            },
            {
              letter: "L",
              cityList: [
                "黎平",
                "龙岩",
                "兰州",
                "梁平",
                "丽江",
                "临沧",
                "庐山",
                "拉萨",
                "洛阳",
                "连云港",
                "临沂",
                "柳州",
                "泸州",
                "林芝",
                "荔波",
                "吕梁",
                "六盘水",
                "临汾",
              ],
            },
            {
              letter: "M",
              cityList: ["牡丹江", "绵阳", "梅州", "满洲", "里漠河"],
            },
            {
              letter: "N",
              cityList: [
                "南昌",
                "南充",
                "宁波",
                "南京",
                "那拉提",
                "南宁",
                "南阳",
                "南通",
                "宁蒗",
              ],
            },
            {
              letter: "P",
              cityList: ["蓬莱", "攀枝花"],
            },
          ],
        },
        {
          category: "QRSTW",
          cityList: [
            {
              letter: "Q",
              cityList: [
                "且末",
                "庆阳",
                "黔江",
                "泉州",
                "衢州",
                "齐齐哈尔",
                "青岛",
                "秦皇岛",
                "琼海",
              ],
            },
            {
              letter: "R",
              cityList: ["如皋", "日喀则", "日照"],
            },
            {
              letter: "S",
              cityList: [
                "绥芬河",
                "上海",
                "沈阳",
                "沙市",
                "石家庄",
                "思茅",
                "三亚",
                "深圳",
                "神农架",
                "十堰",
                "莎车",
                "上饶",
                "邵阳",
                "松原",
                "三明",
              ],
            },
            {
              letter: "T",
              cityList: [
                "台州",
                "塔城",
                "腾冲",
                "铜仁",
                "通辽",
                "通化",
                "天津",
                "唐山",
                "太原",
                "天水",
                "吐鲁番",
              ],
            },
            {
              letter: "W",
              cityList: [
                "乌兰浩特",
                "乌鲁木齐",
                "潍坊",
                "威海",
                "文山",
                "温州",
                "乌海",
                "武汉",
                "武夷山",
                "无锡",
                "梧州",
                "万州",
                "乌兰察布",
                "五大连池",
              ],
            },
          ],
        },
        {
          category: "XYZ",
          cityList: [
            {
              letter: "X",
              cityList: [
                "兴义",
                "香格里拉",
                "西双版纳",
                "西安",
                "兴城",
                "西昌",
                "锡林浩特",
                "兴宁",
                "厦门",
                "西宁",
                "邢台",
                "徐州",
                "忻州",
                "襄阳",
                "信阳",
              ],
            },
            {
              letter: "Y",
              cityList: [
                "延安",
                "银川",
                "伊春",
                "永州",
                "榆林",
                "宜宾",
                "运城",
                "宜昌",
                "伊宁",
                "义乌",
                "依兰",
                "延吉",
                "烟台",
                "盐城",
                "元谋",
                "玉树",
                "扬州",
                "宜春",
                "营口",
              ],
            },
            {
              letter: "Z",
              cityList: [
                "郑州",
                "张家界",
                "芷江",
                "舟山",
                "昭通",
                "湛江",
                "珠海",
                "遵义（新舟）",
                "张家口",
                "张掖",
                "中卫",
                "遵义（茅台）",
              ],
            },
          ],
        },
      ],
    };
  },
  components: {
    cityItem,
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.cityImg {
  // display: none;
  width: 465px;
  padding: 12px;
  background-color: #fff;
  border: 1px solid #eee;
  // img {
  //   width: 522px;
  //   height: 187px;
  // }
  /deep/ .el-tabs__header {
    margin-bottom: 8px;
  }
  /deep/ .el-tabs--card > .el-tabs__header,
  /deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav,
  /deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
    border: 0;
  }
  /deep/
    .el-tabs--top.el-tabs--card
    > .el-tabs__header
    .el-tabs__item:nth-child(2),
  /deep/
    .el-tabs--top.el-tabs--card
    > .el-tabs__header
    .el-tabs__item:last-child {
    padding: 0;
  }
  /deep/ .el-tabs__item {
    width: 70px;
    height: 30px;
    padding: 0;
    line-height: 30px;
    font-size: 12px;
    text-align: center;
    margin-right: 2px;
    background-color: #f6f6f6;
    color: #666;
  }
  /deep/ .el-tabs__item.is-active {
    color: #fff;
    background-color: #ff9d00;
  }
}
</style>